<template>
  <div class="bg-white">
    <SearchForm @get="handleSearch"></SearchForm>
    <br />
    <Table
      :bordered="true"
      :dataSource="dataSource"
      :columns="upPackageColumns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span v-per="'upgrade'">
            <a @click="upgrade(record)" v-if="record.status == '正常（使用中）' && record.appType == 3">升级</a>
          </span>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />
  </div>
  <UpgradeModal ref="upgradeModal" @submitSuccess="getDataSource" />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Table, Pagination } from 'ant-design-vue';
import SearchForm from '/@/views/upgrade-center/package/component/SearchForm.vue';
import UpgradeModal from '/@/views/upgrade-center/package/component/UpgradeModal.vue';
import { upPackageColumns } from './data';
import { getPackageTable } from '/@/api/upgrade-center/package/upgradePackage';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
const dataSource = ref();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);

let params = {
  current: current.value,
  size: pageSize.value,
  tenantId: undefined,
  appId: undefined,
  status: undefined,
};

const getDataSource = async () => {
  try {
    let data = await getPackageTable(params);
    dataSource.value = data.items;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  if (val <= 10) {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (searchParam) => {
  params = {
    current: current.value,
    size: pageSize.value,
    tenantId: searchParam.tenantId,
    status: searchParam.status,
    appId: searchParam.appId,
  };
  getDataSource();
};

const upgradeModal = ref();
const upgrade = async (record) => {
  upgradeModal.value.openModal(record);
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
